<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="提现记录"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="recordList"
            @pullup="loadMore"
        >
            <div
                class="record-empty-tips"
                v-if="recordList.length == 0"
            >{{emptyTips}}</div>

            <div
                class="record-item"
                v-for="(item,index) of recordList"
                :key="index"
                @click="goRecordDetail(item.id)"
            >
                <div class="record-info">
                    <span class="record-info-name">提现进度</span>
                    <span class="record-info-detail status">{{withdrawStatus[item.status]}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">提现金额</span>
                    <span class="record-info-detail">￥{{item.money | currency}}</span>
                </div>
                <div class="record-info">
                    <span class="record-info-name">提现时间</span>
                    <span class="record-info-detail">{{item.add_time}}</span>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'WithdrawRecord',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            withdrawStatus: ['审核中', '提现成功', '提现失败'],
            recordList: [],
            emptyTips: '正在全力加载中...',
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getRecordList()
    },
    methods: {
        getRecordList() {
            this.isLoading = true
            this.axios.post('/api/user/money/take_out_logs.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无数据'
                    }
                    this.recordList = this.recordList.concat(data.data.list)
                    this.totalPage = Math.ceil(data.data.page_info.total / 20)
                    this.nowPage++
                    this.isLoading = false
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getRecordList()
            }
        },
        goRecordDetail(id) {
            this.$router.push({
                path: '/userCenter/withdrawDetail',
                query: {
                    recordId: id
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.record-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.record-item
    padding 0.27rem 0.37rem
    margin-bottom 0.18rem
    background #fff
    .record-info
        display flex
        justify-content space-between
        align-items center
        height 0.7rem
        .record-info-name
            font-size 0.33rem
            color #333
        .record-info-detail
            font-size 0.33rem
            color #666
        .status
            color #d7463c
</style>
